<template>
   <div>
        <Header></Header>
        <div class="box">
            <h3>菜品展示</h3>
            <p> 
                <select >
                   <option value="name">菜品名称</option>
               </select>
               <input type="text"  @change="SearchData" v-model.lazy="val">
            </p>
            <template>
                <el-table :data="rowsData" style="width: 98%" >
                    <el-table-column prop="_id" label="菜品编号" width="250"  align="center"> </el-table-column>
                    <el-table-column prop="name" label="菜品名称" width="150"  align="center"> </el-table-column>
                    <el-table-column prop="isFree" label="免费观看" width="150"  align="center"> </el-table-column>
                    <el-table-column prop="isHot" label="热点商品" width="150"  align="center"> </el-table-column>
                    <el-table-column prop="needtime" label="菜品所需时间" width="150"  align="center"> </el-table-column>
                    <el-table-column  label="菜品图片" align="center">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height:80px" :src="scope.row.coverpic" ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="菜品操作">
                        <template slot-scope="scope">
                             <el-button size="mini" >
                                <router-link :to="'/updateMenus/'+ scope.row._id" >修改</router-link>
                              </el-button>
                              <el-button size="mini" type="danger" >
                                   <router-link :to="'/menusShow/'+ scope.row._id" >详情</router-link>
                              </el-button>
                         </template>
                     </el-table-column>
                </el-table>
            </template>
        </div>
    
        <div class="row" style="text-align: center;">
             <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page=" pageData.currentPage"
                :page-sizes="[3, 5, 7, 10]"
                :page-size="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total - 0">
             </el-pagination>
         </div>
    </div>
</template>

<script>
import Header from "../common/Header.vue";
import {createNamespacedHelpers} from 'vuex'
const{ mapState,mapActions} = createNamespacedHelpers('menus')
export default {
     components: {
        Header,
    },
    data() {
        return {
             pageData: {
                //翻页
                currentPage: 1, 
                pageSize: 3,
            },
            val:'',
        }
    },
    created(){
        this.getDataAsync(this.pageData)
    },
    computed:{
        ...mapState(['rowsData','total'])
    },
     watch:{
        pageData:{
            handler(){
                this.getDataAsync(this.pageData)
                this.searchDataAsync({
                    ...this.pageData,
                     val:this.val
                 })
            },
            deep:true
        },
         "pageData.pageSize"() {
            this.pageData.currentPage = 1;
            this.getDataAsync(this.pageData);
            this.searchDataAsync({
                ...this.pageData,
                 val:this.val
           })
        },
    },
    methods: {
        ...mapActions(['getDataAsync','searchDataAsync']),
        //搜索菜品
        SearchData(){
            this.pageData.currentPage=1
            this.searchDataAsync({
            ...this.pageData,
            val:this.val
           })
        },
        //翻页
        handleSizeChange(val) {
            this.pageData.pageSize=val
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pageData.currentPage=val
            // console.log(`当前页: ${val}`);
        }
    },

}
</script>

<style scoped lang='scss'>
a{
    text-decoration: none;
}
.box {
    margin-top: 30px;
    h3{
        color: #999;
    }
    p{
        margin: 15px 0;
        select{
            display: inline-block;
            width: 80px;
            height: 24px;
            margin-right:10px;
        }
        input{
             height: 20px;
        }
    }
}


.row {
    margin-top: 20px;
    select {
        width: 50px;
        border: 1px solid #cccccc;
    }
    span {
        margin: 0 30px;
    }
    button {
        margin-right: 20px;
        margin-top: 20px;
        padding: 6px 20px;
        border-radius: 3px;
        border: 1px solid #cccccc;
        background-color: #ffffff;
    }
}
.el-pagination {
    color: #999;
}
</style>